<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<h1>Vue 组件的使用</h1>
<div id="example">
    <my-component my-title="辅助将"></my-component>

    <h3>计数器 01：</h3>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>

    <h3>计数器 02：</h3>
    <simple-counter-02></simple-counter-02>
    <simple-counter-02></simple-counter-02>
    <simple-counter-02></simple-counter-02>

    <h3>动态 props :</h3>
    <!--<div>
        <input v-model="parentMsg">
        <br>
        <child v-bind:my-message="parentMsg"></child>
    </div>-->

    <h3>使用 v-on 绑定自定义事件:</h3>
    <div id="counter-event-example">
        <p>{{ total }}</p>
        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

    <h3>一个简单的货币输入的自定义控件：</h3>
    <currency-input v-model="price"></currency-input>

</div>

<script src="./lib/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

<script>
    Vue.component('currency-input', {
        template: `
            <span>
                $<input ref="input" v-bind:value="value"
                        v-on:input="updateValue($event.target.value)" >
            </span>
        `,
        props: ['value'],
        methods: {
            updateValue: function (value) {
                const formattedValue = value.trim()
                    .slice(value.indexOf('.') + 3);
                if (formattedValue !== value) {
                    this.$refs.input.value = formattedValue;
                }
                this.$emit('price', Number(formattedValue))
            }
        }
    })

    Vue.component('button-counter', {
        template: `<button v-on:click="incrementA">{{ counter }}</button>`,
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            incrementA: function () {
                console.log('increment entering...')
                this.counter += 1;
                this.$emit('increment');
            }
        }
    })


    // 注册
    Vue.component('my-component', {
        props: ['myTitle'],
        template: `
            <div>
                <div>A custom component!--{{ name }}</div>
                <div>This is from props : --{{ myTitle || 'ERROR' }}</div>
            </div>
        `,
        data: function () {
            return {
                name: 'jiangxtx'
            }
        }
    })

    Vue.component('child', {
        // camelCase in JavaScript
        props: ['myMessage'],
        template: '<span>{{ myMessage }}</span>'
    })

    const counterData = { counter: 0 };
    Vue.component('simple-counter', {
        template: '<button v-on:click="counter += 1">{{ counter }}</button>',
        // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
        // 但是我们返回给每个组件的实例的却引用了同一个data对象
        data: function () {
            return counterData
        }
    })

    Vue.component('simple-counter-02', {
        template: '<button v-on:click="increment">{{ counter }}</button>',
        // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
        // 但是我们返回给每个组件的实例的却引用了同一个data对象
        data: function () {
            return { counter: 0 }
        },
        methods: {
            increment: function () {
                console.log('increment entering...')
                this.counter += 1;
            }
        }
    })

    // 创建根实例
    new Vue({
        el: '#example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                this.total += 1
            }
        }
    })
</script>

</body>
</html>